<template>
    <div class="container">
        <van-nav-bar
            title="品牌列表"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            :class="hidden == true? 'on':''"
        />
        <!-- 搜索区域 -->
        <div class="search" :class="hidden == true? 'on':''">
            <van-search show-action v-model="queryBySearch.keyword" placeholder="输入关键词，如：标识、品牌名称、或品牌描述">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
            <van-dropdown-menu>
                <van-dropdown-item @change="changeItem1" v-model="queryBySearch.format" :options="option1" />
                <van-dropdown-item @change="changeItem2" v-model="queryBySearch.status" :options="option2" />
            </van-dropdown-menu>
        </div>
        <!-- 列表区域 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="reLoadData"
		    offset="5"
            >
                <div class="brand">
                    <div class="brand-item" v-for="item in brandList" :key="item.id">
                        <div class="hd">
                            <div class="brand-name">{{item.brandName}}</div>
                            <div class="brand-status" @click="changeStatus(item.id,item.displayStatus)">
                                <span style="color: #F56C6C;" v-if="item.displayStatus == 1">下架</span>
                                <span style="color: blue;" v-else>上架</span>
                            </div>
                        </div>
                        <div class="bd">
                            <div class="brand-advantage">
                                <span class="text">品牌优势</span>
                                <span>{{item.brandAdvantage}}</span>
                            </div>
                            <div class="brand-format">
                                <span class="text">业态</span>
                                <span>{{item.brandFormat}}</span>
                            </div>
                            <div class="brand-status">
                                <span class="text">状态</span>
                                <div class="status">
                                    <span v-if="item.displayStatus == 1" style="background-color: #67C23A;display: inline-block;width: 6px;height: 6px;border-radius: 3px;vertical-align: middle;"></span>
                                    <span v-else style="background-color: #F56C6C;display: inline-block;width: 6px;height: 6px;border-radius: 3px;vertical-align: middle;"></span>
                                    <span>{{item.displayStatus|filtersBrandStatus}}</span>
                                </div>
                                
                            </div>
                            <div class="brand-createdtime">
                                <span class="text">创建时间</span>
                                <span>{{item.createTime|dateformat}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import {BUILD_FORM,BRAND_LIST,BRAND_STATUS} from "@/api/brand/message"
export default {
    data(){
        return{
            // 查询参数
            queryBySearch: {
                keyword: "",
                format: "全部",
                // -1全部，0下架，1上架
                status: -1,
                // -1全部，0不含PDF介绍文件，1含PDF
                pdf: -1,
                pageNumber: 1,
                pageSize: 20,
            },
            option1: [
                { text: '全部', value: "全部" },
                { text: '餐饮', value: "餐饮" },
                { text: '零售', value: '零售' },
                { text: '办公', value: '办公' },
                { text: '休闲服务', value: '休闲服务' },
                { text: '生活配套', value: '生活配套' },
                { text: '儿童娱乐', value: '儿童娱乐' },
            ],
            option2: [
                { text: '全部', value: -1 },
                { text: '上架', value: 1 },
                { text: '下架', value: 0 },
            ],
            isLoading:false,
            loading: false,
      	    finished: true,
            //  品牌列表
            brandList:[],
        }
    },
    created(){
        this.loadData()
    },
    // mounted(){
    //     this.listenerFunction();
    // },
    // beforeDestroy () {
    //   document.removeEventListener("scroll", this.listenerFunction);
    // },
    computed:{
        formatArry(){
            console.log("computed",this.queryBySearch.format)
            const Arry = []
            Arry.push(this.queryBySearch.format)
            return Arry
        }
    },
    // 过滤
    filters:{
        filtersBrandStatus(value){
            if(value == 1){
                return "正常"
            }else if(value == 0){
                return "下架"
            }
        }
    },
    methods:{
        async loadData(){
            const {formatArry,queryBySearch} = this
            // 深拷贝
            const queryBySearchCopy = Object.assign({},queryBySearch)
            queryBySearchCopy.format = formatArry
            console.log(queryBySearchCopy)
            const res1 = await BUILD_FORM()
            const res2 = await BRAND_LIST(this.queryBySearch,res1)
            console.log(res2)
            
            if(res2.records.length>0&&res2.records>=res2.total){
                this.finished = false;
            }else if(res2.records.length>0){

            }
            this.brandList = res2.current === "1" ? res2.records : [...this.brandList, ...res2.records];
            this.isLoading = false
        },
        changeMenu1(value){
            console.log(value)
        },
        // // 返回上一页
        // onClickLeft(){
        //     this.$router.go(-1);
        // },
        changeItem1(value){
            console.log(value)
            this.loadData()
        },
        changeItem2(){
            this.loadData()
        },
        //  关键字搜索
        onSearch(){
            this.loadData()
        },
        // 下拉刷新事件
        onRefresh(){
            this.loadData()
        },
        // 页码数++，重新加载数据
        reLoadData(){
            this.loading = true;
            this.queryBySearch.pageNumber+=1
            setTimeout(()=>{
                this.loadData()
            },1000)
        },
        // 品牌上下架
        async changeStatus(id, status) {
            console.log(id, status)
            if (status == 1) {
                status = 0
            } else {
                status = 1
            }
            this.$dialog.confirm({
                title: '提示',
                message: '是否要执行此操作？',
            })
            .then(() => {
                // on confirm
                BRAND_STATUS({displayStatus: status}, id).then(res=>{
                    console.log(res)
                    if (res) {
                        this.$toast.success("操作成功");
                        this.loadData()
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
            
        },
        // 下拉监听开始
        // listenerFunction(e) {
        //     document.addEventListener('scroll', this.handleScroll, true);
        // },
        // handleScroll () {
        //     var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //     // console.log(scroll)
        //     if(scroll>=250){
        //         this.hidden = true
        //     }else{
        //         this.hidden = false
        //     }
        // },
        // 下拉监听结束
    }
}
</script>
<style lang="less" scoped>
// 条件筛选区域
.search-item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  font-size: 0.28rem;
  .item-text {
    width: 1.5rem;
    font-weight: 600;
  }
  .item-input {
    display: flex;
    flex-direction: column;
    button {
      margin: 0.15rem 0;
    }
  }
}
// 列表
.brand{
    padding: 0 0.3rem;
    margin-top: 0.3rem;
}
.brand-item{
    box-shadow: 0 0 5px 1px rgb(226, 226, 226);
    margin-bottom: 0.3rem;
    .hd{
        display: flex;
        justify-content: space-between;
        border: 1px solid #ddd; 
        padding: 0.3rem;
        border-bottom: none;
        .brand-name{
            font-weight: 600;
            color: #000;
        }
    }
    .bd{
        padding: 0.3rem;
        border: 1px solid #ddd;
        .text{
            font-weight: 600;
            color: #000;
        }
        .status{
            span{
                margin: 0 2px;
            }
        }
        div{
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.15rem;
            align-items: center;
        }
    }
}
.search.on{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 999;
}
</style>